import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input, Tabs } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import "@/styles/pages/login.scss";

import { useDispatch } from "react-redux";

import { loginAction } from "@/store/actions";

const HeaderComponent = () => {
  return <div className="header-warrper"></div>;
};

const FormUsernameComponent = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const rules = {
    userName: [{ required: true, message: "请输入用户名！" }],
    password: [{ required: true, message: "请输入密码！" }],
  };

  const onFinish = async (values) => {
    await dispatch(loginAction(values));
    navigate("/");
  };

  return (
    <Form className="form-card" onFinish={onFinish} initialValues={{ userName: "admin", password: "randi" }}>
      <Form.Item name="userName" rules={rules.userName}>
        <Input prefix={<UserOutlined />} placeholder="输入邮箱/账号" autoComplete="off" />
      </Form.Item>
      <Form.Item name="password" rules={rules.password}>
        <Input.Password prefix={<LockOutlined />} placeholder="输入登录密码" />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

const MainComponent = () => {
  const items = [
    {
      key: "1",
      label: "账号登录",
      children: <FormUsernameComponent />,
    },
  ];
  return (
    <div className="main-warrper">
      <div className="left-card">
        <div className="titie">登录中心</div>
      </div>
      <div className="right-card">
        <div className="info-card"></div>
        <div className="form-card">
          <Tabs defaultActiveKey="1" items={items} />
        </div>
      </div>
    </div>
  );
};

const FooterComponent = () => {
  return <div className="footer-warrper"></div>;
};

const LoginComponent = () => {
  return (
    <div className="login-warrper">
      <HeaderComponent />
      <MainComponent />
      <FooterComponent />
    </div>
  );
};

export default LoginComponent;
